<!--
 * @Author: zhang_wenjuan
 * @Date: 2021-05-19 08:46:02
 * @LastEditTime: 2021-07-10 15:51:38
 * @Description: 缺陷列表
-->
<template>
    <div id="defectList_page">
        <!-- 顶部导航 -->
        <van-nav-bar title="履历"  left-arrow @click-left="back" fixed>
            <template slot="right">
                <div class="parent-circle">
					<div class="child-circle"></div>
				</div>
            </template>
        </van-nav-bar>
        <van-tabs class="van_tab" v-model="activeIndex" animated swipeable>
            <!-- 设备类型列表tab -->
            <van-tab style="height:100%;" v-for="tab in tabs" :title="tab.NAME" :name="tab.CODE" :key="tab.CODE">
                    <!-- 查询条件 -->
                    <div class="selectPart" v-if="activeIndex=='1'">
                        <!-- 选择缺陷状态 -->
                        <div class="topLine">
                            <div class="left">
                                <span class="title" style="width: 80px;">缺陷状态：</span>
                                <span class="field" @click="showStatusPop = true">{{defectState}}</span>
                            </div>
                        </div>
                        <div class="bottomLine" style="position: relative;">
                            <span class="title">发现时间：</span>
                            <span class="field" @click="showStartTime=true" >{{startTime1 | formatTime}}</span>
                            <img :src="iocn.time" @click="showStartTime = true" style="width: 30px;height: 30px;position: absolute;left: 47%;"/>
                            <span class="zhi">-</span>
                            <span class="field" @click="showEndTime = true" >{{endTime1 | formatTime}}</span>
                            <img :src="iocn.time" @click="showEndTime = true" style="width: 30px;height: 30px;position: absolute;right: 0;"/>
                        </div>
                        <!-- 缺陷状态下拉弹窗 -->
                        <van-popup get-container="#defectList_page" v-model="showStatusPop" position="bottom">
                            <van-picker show-toolbar title="缺陷状态" :columns="statusArr" @confirm="confirmStatus" @cancel="showStatusPop = false" />
                        </van-popup>

                        <!-- 发现时间下拉弹窗(开始) -->
                        <van-popup get-container="#defectList_page" v-model="showStartTime" position="bottom">
                            <van-datetime-picker type="datetime" title="选择日期" @confirm="confirmTime('start')" 
                            :min-date="minDate"
                            :formatter="formatter"
                            :max-date="maxDate"
                            v-model="startTime2" @cancel="showStartTime = false" />
                        </van-popup>
                        <!-- 发现时间下拉弹窗(结束) -->
                        <van-popup get-container="#defectList_page" v-model="showEndTime" position="bottom">
                            <van-datetime-picker type="datetime"  title="选择日期" @confirm="confirmTime('end')" 
                            :min-date="minDate"
                            :formatter="formatter"
                            :max-date="maxDate"
                             v-model="endTime2" @cancel="showEndTime = false" />
                        </van-popup>
                    </div>
                    <!-- 任务列表 -->
                    <div class="listPart" v-show="activeIndex=='1'">
                        <div class="doc-wrapper">
                            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                                <van-list
                                  offset="0"
                                  v-model="loading"
                                  :finished="finished"
                                  finished-text="没有更多了"
                                  @load="onLoad"
                                >
                                    <div class="defectItem" v-for="(item,i) of defectList" :key="i" @click="toDetail(item)">
                                        <!-- 左侧图片区域 -->
                                        <!-- <div class="leftPart">
                                            <van-image class="imgSize" v-if="item.img" width="100" height="100" :src="item.img" />
                                            <van-image class="imgSize" v-else="item.img" width="100" height="100" :src="require('../../../../assets/img/mainIndex/loginout.png')" />
                                        </div> -->
                                        <!-- 右侧文字区域 -->
                                        <div class="rightPart">
                                            <div class="topPart">
                                                <div :class="{status:true, blue:item.eliminateDefectState == '4',red:item.eliminateDefectState !='4'}">
                                                {{item.eliminateDefectState | dealStatus}}</div>
                                                <div>缺陷性质：<span class="val333">{{item.defectNature}}</span></div>
                                            </div>
                                            <div class="describ">{{item.classifyGist}}</div>
                                            <div class="timePart">
                                                <div>发现时间：<span class="val333">{{item.discoveryDate | formatTime}}</span></div>
                                                <div>消缺时间：<span class="val333">{{item.eliminateDate | formatTime}}</span></div>
                                            </div>
                                        </div>
                                    </div>
                                </van-list>
                            </van-pull-refresh>
                        </div>
                    </div>
                    <HiddenDangerList :deviceinfo="deviceInfo" v-show="activeIndex =='2'"></HiddenDangerList>    
                    <MaintenanceType :deviceinfo="deviceInfo" v-show="activeIndex == '3'"></MaintenanceType>  
                    <TestRecord :deviceinfo="deviceInfo" v-show="activeIndex == '4'"></TestRecord>
                    <tableData :deviceinfo="deviceInfo" v-show="activeIndex == '5'"></tableData> 
            </van-tab>
          </van-tabs>    

        <van-popup v-model="showDetail" get-container="#app" position="bottom">
            <Detail :defectInfo="defectInfo" @closeDetail="showDetail=false"></Detail>
        </van-popup>
    </div>
</template>
<script type="text/javascript">
import Util from '@/utils/util'
import HiddenDangerList from './HiddenDangerList'
import MaintenanceType from './MaintenanceType'
import TestRecord from './TestRecord'
import tableData from './TableData'
import Detail from './defectRecordDetail'
import {getDefectRecord} from '../../api/tourTask'
export default {
    name: "defectList",
    components: {
        HiddenDangerList,
        MaintenanceType,
        tableData,
        TestRecord,
        Detail
    },
    data() {
        return {
            defectList:[
            ],
            //是否展示缺陷状态
            showStatusPop:false,
            //是否展示缺陷性质
            showXingzhiPop:false,
            // 缺陷状态下拉数组
            statusArr:[],
            // 缺陷性质下拉数组
            //xingzhiArr:[],
            //是否展示开始时间
            showStartTime:false,
            //是否展示结束时间
            showEndTime:false,
            // 开始时间
            startTime1:"",
            startTime2:new Date(),
            // 结束时间
            endTime1: "",
            endTime2: new Date(),
            activeIndex:"1",
            tabs:[{NAME:"缺陷记录",CODE:"1"},{NAME:"隐患记录",CODE:"2"},{NAME:"检修记录",CODE:"3"},{NAME:"实验记录",CODE:"4"},{NAME:"表计数据",CODE:"5"}],
            defectState: "",//缺陷状态
            defectStateId: "",//缺陷状态id
            defectNature: "",//缺陷性质
            defectNatureId: "",//缺陷性质id
            hideDangerList: [],//隐患记录列表
            expriData: {},//试验记录
            checkList:[],//获取检修列表
            physicalParams: [],//获取设备物理参数
            pageNum: 0,//当前页
            pageSize: 10,//每页数量
            iocn: {
                "time": require("@assets/img/mainIndex/time.png"),
            },
            finished:false,
            loading:false,
            refreshing: false,
            showDetail: false,//缺陷详情显示flag
            defectInfo: {},//缺陷详情
            userInfo:{},
            deviceInfo: {},//设备信息
            minDate: new Date(new Date().getFullYear()-2,new Date().getMonth()+1,new Date().getDay()),
			maxDate: new Date(new Date().getFullYear()+2,new Date().getMonth()+1,new Date().getDay())
        }
    },
    methods: {
        //日期格式
        formatter(type, val) {
            if (type === 'year') {
                return val + '年';
            }
            if (type === 'month') {
                return val + '月';
            }
            if (type === 'day') {
                return val + '日';
            }
            if (type === 'hour') {
                return val + '时';
            }
            if (type === 'minute') {
                return val + '分';
            }
            return val;
        },
        /**
         * @description: 返回
         */
        back(){
            this.$router.push({
                name:"executeIndex",
                params: {
                    taskInfo: this.taskInfo
                }
            })
        },

        /**
         * @description: 新增缺陷
         */
        addDefect(){
            this.$router.push({
                name:"AddDefect"
            })
        },

        /**
         * @description: 确认选择缺陷状态
         * @param {String} val 缺陷状态
         */ 
        confirmStatus(val){
            this.showStatusPop = false;
            console.log(val)
            this.defectState = val.text;
            this.pageNum = 1;
            this.defectList = [];
            this.getDefectRecord();
        },

        /**
         * @description: 确认选择时间
         * @param {String} type 确认类型
         */ 
        confirmTime(type){
            if(type=="start"){
                console.log(this.startTime2)
                this.showStartTime = false
                this.startTime1 = Util.DateUtil.getFormatDateByLong(this.startTime2,'yyyy-MM-dd hh:mm:ss')
            }else{
                console.log(this.endTime2)
                this.showEndTime = false
                this.endTime1 = Util.DateUtil.getFormatDateByLong(this.endTime2,'yyyy-MM-dd hh:mm:ss')
            }
            if(this.startTime1 && this.endTime1) {
                var start = new Date(this.startTime1).getTime()
                var end = new Date(this.endTime1).getTime()
                if(end = start || start < end) {
                    this.pageNum = 1;
                    this.defectList = [];
                    this.getDefectRecord();
                }else{
                    this.$Toast.fail("开始时间不能大于结束时间！")
                }
            }
        },
        /**
         * @description: 跳转至缺陷详情
         * @param {Object} item 当前点击的缺陷
         */ 
        toDetail(item){
            this.showDetail = true;
            this.defectInfo = item;
        },
        /**
         * @description: 获取指定设备缺陷记录
         * @param {*}
         * @return {*}
         */
        getDefectRecord() {
            var self = this,startTime="",finishTime="";
            if(this.startTime1 && this.endTime1) {
                startTime = new Date(this.startTime1).getTime();
                finishTime = new Date(this.endTime1).getTime();
            }
            var params = {
               // deviceId:this.deviceInfo.deviceId,
                deviceId: "175680146",
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                userId: this.userInfo.userId,//用户id
                roleCode: "",//用户角色
            }
            if(this.defectState) {//缺陷性质
                params.defectState = this.defectState;
            }
            if(startTime) {
                params.startTime = startTime;
            }
            if(finishTime) {
                params.finishTime = finishTime;
            }
            this.$Toast.loading({
                    duration: 0,//展示时长 0不会消失
                    message: "巡视设备缺陷记录获取中...",
                    forbidClick: true,//是否禁止背景点击
                    overlay: true//是否显示背景遮罩层
                })
            getDefectRecord(params).then(data => {
                self.$Toast.clear();
                if(self.refreshing){
                    self.refreshing = false
                }
                self.pageNum = data.pageInfo.pageNum;//当前页数
                console.log("res.pageInfo.pageNum",data.pageInfo.pageNum)
                if(self.pageNum == data.pageInfo.pages || data.pageInfo.pages == 0) {
                    self.finished = true
                }else{
                    self.finished = false
                }
                self.loading = false;//加载完成
                if(data.success) {
                    self.$Toast.success(data.msg)
                    self.defectList = data.data;//任务详情数据
                }else{
                    self.$Toast.fail(data.msg)
                }
            }).catch(err => {
                self.finished = true
                self.loading = false;//加载完成
                self.$Toast.fail(err)
            })
        },        
        arrChange(arr) {
            if(arr.length != 0) {
                arr.forEach(item => {
                    item["text"] = item.name;
                })
                return arr;
            }
            return [];
        },
        /**
        * @description: 列表下拉刷新
        * @param {*}
        * @return {*}
        */
        onRefresh() {
            //清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            //this.loading = true;
            this.pageNum = 1;
            this.defectList = [];
            this.getDefectRecord();
        },
        /**
        * @description: 上拉加载更多数据
        * @param {*}
        * @return {*}
        */
        onLoad() {
            this.pageNum++;
            this.getDefectRecord();
        },
    },
    filters: {
        formatTime(val) {
            var time = "";
            if(val){
                time = Util.DateUtil.getFormatDateByLong(val,'yyyy-MM-dd hh:mm') 
            }
            return time;
        },
        dealStatus(val) {
            var statusName = "";
            switch(val) {
                case "0" : statusName="缺陷登记";break;
                case "1" : statusName="审核";break;
                case "2" : statusName="缺陷处理";break;
                case "3" : statusName="验收";break;
                case "4" : statusName="结束";break;
            }
            return statusName;
        }
    },
    mounted() {
        this.statusArr = this.arrChange(Util.baseUtil.getSpecialCode("DEFECT_STATUS"));//缺陷状态
        console.log(this.statusArr)
        //this.xingzhiArr = this.arrChange(Util.baseUtil.getSpecialCode("DEFECT_ATTRIBUTE"));//缺陷状态
    },
    created(){
        var userInfo = localStorage.getItem("userInfo");
        this.userInfo = JSON.parse(userInfo);
        this.taskInfo = this.$route.query.taskInfo;
        this.deviceInfo = this.$route.query.deviceInfo;
        //this.getDefectRecord();//获取缺陷记录
    },
}
</script>
<style scoped>
#defectList_page {
    width: 100%;
    height: 100%;   
    padding-bottom: 0;
    /* padding-top: 46px; */
    /* background: #fff; */
}
.van-nav-bar {
    background: #17b49b;
}
.van-nav-bar /deep/ .van-icon {
    color: #fff;
    font-size: 1.375rem;
}
.scan {
    margin: 0 10px;
}
.van-nav-bar /deep/ .van-nav-bar__title {
    color: #fff;
    font-size: 1.125rem;
}
.van-nav-bar /deep/ .van-button {
    margin-right: 10px;
}
/* 筛选区域 */
.selectPart {
    width: 100%;
    height: 120px;
    padding: 15px;
    background: #fff;
    font-size: 0.75rem;
    color: #666;
    position: fixed;
    left: 0;
    top: 10px;
    box-sizing: border-box;
}
.selectPart .topLine {
    display: flex;
    justify-content: space-between;
}
.selectPart .topLine .left {
    width: 100%;
    display: flex;
}
.selectPart .title {
    display: inline-block;
    width: 75px;
    height: 25px;
    line-height: 25px;
}
.selectPart .topLine  .field {
    border: 1px solid #eee;
    display: inline-block;
    width: 100%;
    height: 25px;
    line-height: 25px;
    text-align: right;
    padding: 0 5px;
    box-sizing: border-box;
}
.selectPart .bottomLine {
    display: flex;
    margin-top: 10px;
}
.selectPart .bottomLine .field {
    height: 25px;
    line-height: 25px;
    border: 1px solid #eee;
    text-align: right;
    padding: 0 5px;
    text-align: left;
    width: 40%;
}
.selectPart .bottomLine .zhi {
    height: 25px;
    line-height: 25px;
    margin: 0 10px;
}
.kong {
    width: 100%;
    height: 120px;
}
/* 任务列表 */
.listPart {
    margin-top: 120px;
    padding: 0 10px 10px;
    height: calc(100% - 166px);
    overflow-y: auto;
    background: #fff;
}
.defectItem {
    background: #fafafa;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 15px;
    color: #8f8f94;
    font-size: 0.875rem;
    display: flex;
    justify-content: space-between;
}
/* .defectItem .leftPart {
    width: 100px;
    height: 100px;
    border: 1px solid #eee;
    margin-right: 20px;
} */
.defectItem .rightPart {
    /* //width: calc(100% - 100px); */
    width:100%;
}
.defectItem .rightPart .topPart {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.defectItem .rightPart .topPart .status.red {
    background: #eb3b3b;
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
}
.defectItem .rightPart .topPart .status.blue {
    background: #1481ee;
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
}
.defectItem .rightPart .describ {
    margin: 10px 0;
    color: #333;
}
.defectItem .rightPart .val333 {
    color: #333;
}
.van_tab{
    height: 100%;
    position: relative;
    top: 50px;
}
/deep/ .van-tabs__content{
    height: 100%;
}
/deep/ .van-tab__pane{
    height: 100%;
}
.doc-wrapper{
    overflow-y: auto;
    height: calc(100% - 212px);
}
.timePart div{
    margin-top:10px;
}
</style>
